<template>
  <view-box ref="viewBox" body-padding-bottom="5px">
    <div class="donation-box">
      <div class="desc">
        <h2>爱心榜</h2>
      </div>
    </div>
    <x-table>
      <thead>
        <tr>
          <th>排名</th>
          <th>众筹人</th>
          <th>金额</th>
          <th>日期</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(d, i) in list" :key="i">
          <td>{{i + 1}}</td>
          <td>{{d.user.name}}</td>
          <td>￥{{d.amount}}</td>
          <td>{{d.created_at.substr(0, 10)}}</td>
        </tr>
      </tbody>
    </x-table>
  </view-box>
</template>
<script>
  import { ViewBox, XTable } from 'vux'
  export default {
    data () {
      return {
        list: []
      }
    },
    components: {
      ViewBox,
      XTable
    },
    mounted () {
      this._getData()
    },
    methods: {
      _getData ($state) {
        this.$vux.loading.show()
        this.$http.get('/donations', {
          params: {
            page_size: 20,
            order_by: 'amount',
            order_type: 'desc'
          }
        }).then((response) => {
          this.$vux.loading.hide()
          this.list = response.data.data
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .donation-box {
    width: 100%;
    background: url(./images/bg.jpg);
    background-size: 100%;
    color: #fff;
    .desc {
      padding: 30px 20px;
      h2 {
        text-align: center;
      }
      p {
        padding: 20px 0;
        text-indent: 20px;
      }
    }
  }
  .card-demo-flex {
      display: flex;
    }
    .card-demo-content01 {
      padding: 10px 0;
    }
    .card-padding {
      padding: 15px;
    }
    .card-demo-flex > div {
      flex: 1;
      text-align: center;
      font-size: 12px;
    }
    .card-demo-flex span {
      color: #f74c31;
    }
</style>